<template>
    <div class="alert-container">
      <el-alert :title="title" v-if="type=='success'" type="success" @close="close" show-icon/>
      <el-alert :title="title" v-if="type=='info'" type="info" @close="close" show-icon/>
      <el-alert :title="title" v-if="type=='warning'" type="warning" @close="close" show-icon/>
      <el-alert :title="title" v-if="type=='error'" type="error" @close="close" show-icon/>
    </div>
</template>
<script lang="ts" setup>
    const type = ref("")
    const title = ref("提示")
    const timeoutID = ref(null)
    const show = (title_: string, type_: string) => {
        if (timeoutID.value) {
            close()
        }
        title.value = title_
        type.value = type_
        return new Promise(()=>{
            timeoutID.value = setTimeout(()=>{
                type.value = ''
            }, 3000)
        })
    }
    const close = ()=>{
        type.value = ''
        console.log("close:", timeoutID.value)
        clearTimeout(timeoutID.value)
    }
    const success = (title_: string) => {
        show(title_, 'success')
    }
    const info = (title_: string) => {
        show(title_, 'info')
    }
    const warning = (title_: string) => {
        show(title_, 'warning')
    }
    const error = (title_: string) => {
        show(title_, 'error')
    }
    defineExpose({
        show,
        success,
        info,
        warning,
        error,
    })
</script>

<style>
    .alert-container {
        position: fixed;
        top: 15px;
        width: 80%;
        z-index: 9999;
    }
</style>